<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
	<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
	<meta HTTP-EQUIV="expires" CONTENT="0">
	<title>费率查询</title>
	<link rel="stylesheet" href="css/rate.css">
	
</head>
<body class="f6">
	<div class="wrap por height_98">
		<div class="main_body wrapper">
			<div class="rate_head">
				<img src="img/rate_toplayer.png"></div>
			<div class="station">
				<p class="instation por">
					<img src="img/arrow_down.png">
					<span class='start b0'>起点收费站</span> <i class="start_arr"></i>
				</p>
				<p class="outstation por"> <b><em></em></b> 
					<span class='end b0'>终点收费站</span> <i class="end_arr"></i>
				</p>
			</div>
			<div class="type">
				<h3>车辆种类</h3>
				<p class="vehicle_class">
					<span class="class_selected">
						<img class="selected_arr" src="img/selected.png">客车</span>
					<span>货车</span>
				</p>
				<h3>车型</h3>
				<p class="vehicle_type_out por">
					<img src="img/car.png" class="car_img type_car">
					<img src="img/shaft.png" class="shaft_img type_truck" style="display:none">
					<a class="type_car"></a>
					<a class="type_truck" style="display:none">轴组</a>
					<span class='vehicle_type'>
						<select name="" id="" class="b0 vehicle_car_type type_car" >
							<option data-vehicleType="null">必选</option>
							<option data-vehicleType= "1">客1(&lt;=7座)</option>
							<option data-vehicleType= "2">客2(8~19座)</option>
							<option data-vehicleType= "3">客3(20~39座)</option>
							<option data-vehicleType= "4">客4(40座以上)</option>
						</select>
						<select name="" id="" class="b0 vehicle_truck_type type_truck" style="display:none">
							<option data-vehicleType="null">必选</option>
							<option data-vehicleType= "11">二轴11型W=4.5吨</option>
							<option data-vehicleType= "12">二轴12型W=17吨</option>
							<option data-vehicleType= "112">三轴112型W=24吨</option>
							<option data-vehicleType= "15">三轴15型W=25吨</option>
							<option data-vehicleType= "122">三轴122型W=27吨</option>
							<option data-vehicleType= "1211">四轴1211型W=31吨</option>
							<option data-vehicleType= "115">四轴115型W=32吨</option>
							<option data-vehicleType= "125">四轴125型W=35吨</option>
							<option data-vehicleType= "1222">四轴1222型W=37吨</option>
							<option data-vehicleType= "155">五轴155型W=41吨</option>
							<option data-vehicleType= "127">五轴127型W=43吨</option>
							<option data-vehicleType= "157">六轴157型W=49吨</option>
						</select>

					</span> <b class="type_detail type_truck" style="display:none">?</b>
					<i class="type_arr"></i>
				</p>
				<p class="weight_out por" style="display:none">
					<img src="img/weight.png">
					重量
					<input type="text" placeholder="选填" class="weight" maxlength="7" ></p>
			</div>
			<div class="query">查询</div>

		</div>
		<div class="station_wrap">
			<div class="station_top">
				<span>
					<i></i>
				</span>
				请选择站点
			</div>
			<div class="station_body">
				<div class="nodata" style="display:none">
					<img src="img/nodata.png">
					<h3>查不到相关信息</h3>
					<p>多出去走走,记得出行用ETC</p>
				</div>
				<h2>
					<img src="img/search.png">
					<input class="search_input" placeholder="请输入站名"></h2>
				<ul class="station_list"></ul>
			</div>
		</div>
		<div class="shaft_wrap">
			<div class="shaft_top">
				<span>
					<i></i>
				</span>
				货车计重收费轴型标准
			</div>
			<div class="shaft_body">
				<table class="shaft_table">
					<thead>
						<tr>
							<th>轴数</th>
							<th>轴组</th>
							<th>车辆形式及轴型示意图</th>

							<th>计重标准(吨)</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>2</td>
							<td>11</td>
							<td>
								<img src="img/t11.png"></td>
							<td>4.5</td>
						</tr>
						<tr>
							<td>2</td>
							<td>12</td>
							<td>
								<img src="img/t12.png"></td>
							<td>17</td>
						</tr>
						<tr>
							<td rowspan="3">3</td>
							<td>112</td>
							<td>
								<img src="img/t112.png"></td>
							<td>24</td>
						</tr>
						<tr>
							<td>15</td>
							<td>
								<img src="img/t15.png"></td>
							<td>25</td>
						</tr>
						<tr>

							<td>122</td>
							<td>
								<img src="img/t122.png"></td>
							<td>27</td>
						</tr>
						<tr>
							<td rowspan="4">4</td>
							<td>1211</td>
							<td>
								<img src="img/t1211.png"></td>
							<td>31</td>
						</tr>
						<tr>
							<td>115</td>
							<td>
								<img src="img/t115.png"></td>
							<td>32</td>
						</tr>
						<tr>
							<td>1222</td>
							<td>
								<img src="img/t1222.png"></td>
							<td>37</td>
						</tr>
						<tr>
							<td>125</td>
							<td>
								<img src="img/t125.png"></td>
							<td>35</td>
						</tr>

						<tr>
							<td rowspan="2">5</td>
							<td>127</td>
							<td>
								<img src="img/t127.png"></td>
							<td>43</td>
						</tr>

						<tr>

							<td>155</td>
							<td>
								<img src="img/t155.png"></td>
							<td>41</td>
						</tr>

						<tr>
							<td>≥6</td>
							<td>157</td>
							<td>
								<img src="img/t157.png"></td>
							<td>49</td>
						</tr>

					</tbody>
				</table>
			</div>

		</div>
		<div class="bottomLogo">
			<p>本服务由江西省高速公路联网管理中心提供</p>
			<p>广州华工软件信息有限公司提供技术支持</p>
			<p>客服热线：0791-96122</p>
		</div>
		<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
		<div class="toast toast_error" style="display:none">信息输入有误</div>
		<div class="loading" style="display:none">
			<img src="img/loading.gif"></div>
	</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/base.js"></script>
	<script type="text/javascript" src="js/handle.js"></script>

	<script type="text/javascript">
		var stationFlag = false,
			stationLoadingFlag = false;

		var stationIndex = null;
		
		function getStationList() {
			$(".loading").show();
			$(".nodata").hide();	
			$(".station_list>*").css('visibility', 'hidden');
			stationLoadingFlag = true; // 请求开始
			$.ajax({
				url: "<%=basePath%>" + 'infoQuery/getSiteInfo',
				type: 'GET',
				dataType: 'json',
				timeout: 15000,
				cache: false,
				success: function(r) {
					stationFlag = true;
					stationLoadingFlag = false; // 请求结束
					$(".loading").hide();
									
					for (var i = 0; i < r.length-1; i++) {
						var blname = r[i].blname;
						var blroad = r[i].blroad;
						var orgname = r[i].orgfullname;
						var orgid = r[i].orgid;
						var liText = "<li class='orgli' data-orgid='"+orgid+"'>"+orgname+"</li>";
						if($("#blroad" + blroad).length<=0){
							var outText = "<li id = 'blroad"+blroad+"'><h3>" + blname +"</h3><ul></ul></li>";
							$(".station_list").append(outText);
						}
						$("#blroad"+ blroad + " ul").append(liText);
						$(".station_list>*").css('visibility', 'visible');
					}
				},
				error: function(e) {
					stationLoadingFlag = false; // 请求结束

					$(".loading").hide();
					$(".nodata").show();	

					ajaxErrorEvent(e);
				}
			});
		}
		$(function() {
			
			//轴组详情页面的展开和收起
			$(".type_detail").on('click', function(e) {
				e.preventDefault();
				$("input,select").blur();
				$(".shaft_wrap").animate({
					left: "0"
				}, 200);
			});
			$(".shaft_top span").on('click', function(e) {
				$(".shaft_wrap").animate({
					left: "100%"
				}, 200);

			});

			//站点出入口列表页的收起
			$(".station_top span").on('click', function(e) {
				$(".station_wrap").animate({
					left: "100%"
				}, 200);
				setTimeout(function(){
					//收起后清空输入框的值和列表还原
					$(".search_input").val("");
					$(".station_list").scrollTop(0).find('li').show();
				}, 200);

			});

			//选择种类时的交互效果
			$(".vehicle_class span").on('click', function(e) {
				var i = $(this).index();

				$("input,select").blur();
				if ($(this).has('img').length <= 0) {
					$(this).append("<img class='selected_arr' src='img/selected.png'>")
				}
				$(this).addClass('class_selected').siblings('span').removeClass('class_selected').find('img').remove();				
				if(i == 1){
					//车种类为货车时，隐藏客车的相关选项
					$(".vehicle_car_type").hide();
					$(".weight_out, .type_truck").show();				
				}else{		
					//车种类为客车时，隐藏货车的相关选项			
					$(".type_truck").hide();				
					$(".weight_out").hide().find('.weight').val("");
					$(".vehicle_car_type").show();					
				}	
				//移除已选和已填的数据
				$(".vehicle_truck_type option:eq(0),.vehicle_car_type option:eq(0)").attr('selected', 'selected').siblings('option').removeAttr('selected', 'selected');		
			});

			//重量过滤非数字
			$(".weight").on('input', function(e) {
				var input = $(this).val().replace(/\D/ig, '');
				$(this).val(input);
			});

			//展示出入口列表
			$(".station").on('click', 'p', function(e) {		
				e.preventDefault();	
				$("select").blur();
				$(".station_wrap").animate({
					left: 0
				}, 200);
				stationIndex = $(this).index();//i=0 入口;i=1 出口
				if(stationFlag == false && stationLoadingFlag == false){					
					getStationList();
				}
			});

			// 搜索
			$(".search_input").on('input', function(e) {
				var $text = $(this).val();
				var $listTitle = $("#station_list li h3");
				var $listDetail = $("#station_list li ul li");
				var reg = /^[\u4e00-\u9fa5]+$/;

				if ($text == '') {
					$(".station_list li").show();
				}
				if(!reg.test($text)){
					return false;
				}else {
					$(".station_list > li").each(function() {
						var li = $(this);
						var $node = li.find("h3").text();
						var $leaves = li.find("li").text();
						if ($node.indexOf($text) == -1) {
							var flag = true;
							$(this).find("li").each(function() {
								if ($(this).text().indexOf($text) >= 0) {
									flag = false;
									$(this).show();
									//$(this).parent("ul").siblings('h3').hide();//隐藏父节点				
								} else {
									$(this).hide();
								}
							});
							if (flag) {
								li.hide();
							}
						}
					});
				}
			});

			//选定出入口
			$(".station_wrap").on('click', '.orgli', function(e) {
				e.preventDefault();
				var orgid = $(this).attr("data-orgid");
				var orgname = $(this).html();
				
				if(stationIndex==1){
					//instation	
					$(".end").attr("data-orgid",orgid).html(orgname).removeClass('b0');	
				}else{
					//outstation	
					$(".start").attr("data-orgid",orgid).html(orgname).removeClass('b0');
				}

				$(".station_wrap").animate({
					left: "100%"
				}, 200,function (e) {
					$(".station_list").scrollTop(0);
				});
			});

			//点击查询按钮
			$(".query").on('click',function(e) {
				var fromStationNo = $(".start").attr("data-orgid"),
					toStationNo = $(".end").attr("data-orgid");
				
				var vehicleClass = $(".vehicle_class span:eq(0)").hasClass('class_selected') ? 0 : 1;
				var vehicleType;
				var weight = $('.weight').val() ? $('.weight').val()*1000 : null;

				if (vehicleClass == 0) {
					vehicleType = $(".vehicle_car_type option:selected").attr('data-vehicleType');
				}else{
					vehicleType = $(".vehicle_truck_type option:selected").attr('data-vehicleType');
				}

				//出入口选择有误
				if(!fromStationNo || !toStationNo || fromStationNo == toStationNo){	
					errorToast("请选择正确的出入口",3);				
					return false;
				}

				//车型选择有误
				if(vehicleType == "null"){
					errorToast("请选择正确的车型",3);
					return false;
				}

				var fromStationName = $(".start").html();
				var toStationName = $(".end").html();
				sessionStorage.setItem("fromStationNo", fromStationNo);
				sessionStorage.setItem("toStationNo", toStationNo);
				sessionStorage.setItem("vehicleClass", vehicleClass);
				sessionStorage.setItem("vehicleType", vehicleType);
				sessionStorage.setItem("fromStationName", fromStationName);
				sessionStorage.setItem("toStationName", toStationName);
				if(weight){				
					sessionStorage.setItem("weight", weight);
				}else{
					sessionStorage.removeItem("weight");
				}

				//处理缓存
				$(".weight").val("");
				$(".vehicle_class span").eq(0).trigger('click');
				$(".start").html("起点收费站").addClass('b0');
				$(".end").html("终点收费站").addClass('b0');
			
				window.location.href = "infoQuery/toRateQueryResultPage";

			});
			
		})
	</script>

</body>
</html>